import {
    Map,
    GCJ02, LatLngType,
    Point,
    Polyline,
    SimpleFillSymbol,
    FeatureClass,
    FeatureLayer,
    SimpleRenderer,
    CategoryRenderer,
    CategoryRendererItem,
    Field, Label, Tooltip, CoverCollision,
    FieldType,
    Graphic, SimpleMarkerSymbol, Feature, SimpleTextSymbol
} from "../dist";

window.load = () => {
    const amap = new AMap.Map("amap", {
        fadeOnZoom: false,
        navigationMode: 'classic',
        optimizePanAnimation: false,
        animateEnable: false,
        dragEnable: false,
        zoomEnable: false,
        resizeEnable: true,
        doubleClickZoom: false,
        keyboardEnable: false,
        scrollWheel: false,
        expandZoomRange: true,
        zooms: [1, 20],
        mapStyle: 'normal',
        features: ['road', 'point', 'bg'],
        viewMode: '2D'
    });

    const map = new Map("foo");
    map.maxZoom = 22;
    const element = document.getElementById("amap");
    map.on("extent", (event) => {
        if (event.zoom <= 20) {
            element.style.setProperty("display", "block");
            amap.setZoomAndCenter(event.zoom, event.center);
        } else {
            element.style.setProperty("display", "none");
        }
        document.getElementById("x").value = Math.round(event.center[0] * 1000)/1000;
        document.getElementById("y").value = Math.round(event.center[1] * 1000)/1000;
        document.getElementById("zoom").value = event.zoom;
        document.getElementById("x1").value = Math.round(event.extent.xmin * 1000)/1000;
        document.getElementById("y1").value = Math.round(event.extent.ymin * 1000)/1000;
        document.getElementById("x2").value = Math.round(event.extent.xmax * 1000)/1000;
        document.getElementById("y2").value = Math.round(event.extent.ymax * 1000)/1000;
        document.getElementById("a").value = Math.round(event.matrix.a * 1000)/1000;
        document.getElementById("d").value = Math.round(event.matrix.d * 1000)/1000;
        document.getElementById("e").value = Math.round(event.matrix.e * 1000)/1000;
        document.getElementById("f").value = Math.round(event.matrix.f * 1000)/1000;
    });

    var req = new XMLHttpRequest();
    req.onload = (event) => {
        const featureClass = new FeatureClass();
        featureClass.loadGeoJSON(JSON.parse(req.responseText));
        const featureLayer = new FeatureLayer();
        featureLayer.featureClass = featureClass;
        const field2 = new Field();
        field2.name = "NAME";
        field2.type = FieldType.String;
        const renderer = new CategoryRenderer();
        renderer.generate(featureClass, field2);
        featureLayer.renderer = renderer;
        const label = new Label();
        const symbol = new SimpleTextSymbol();
        symbol.pointSymbolWidth = 12;     //diameter
        symbol.pointSymbolHeight = 12;   //diameter
        symbol.auto = true;
        /*symbol.offsetX = 0;  //
        symbol.offsetY = 6;  //radius
        symbol.placement = "BOTTOM";*/
        /*symbol.offsetX = 0;  //
        symbol.offsetY = -6;  //-radius
        symbol.placement = "TOP";*/
        /*symbol.offsetX = 6;  //radius
        symbol.offsetY = 0;  //
        symbol.placement = "RIGHT";*/
        /*symbol.offsetX = -6;  //radius
        symbol.offsetY = 0;  //
        symbol.placement = "LEFT";*/
        label.field = field2;
        label.symbol = symbol;
        label.collision = new CoverCollision();
        featureLayer.label = label;
        featureLayer.labeled = true;
        featureLayer.zoom = [12, 22];
        map.addLayer(featureLayer);

        map.setView([109.519, 18.271], 13);
    };
    req.open("GET", "assets/geojson/junction.json", true);
    req.send(null);

    map.setProjection(new GCJ02(LatLngType.GCJ02));
    //beijing gugong
    const point = new Point(116.397411,39.909186);
    const feature = new Feature(point, {});
    const featureClass = new FeatureClass();
    featureClass.addFeature(feature);
    const marker = new SimpleMarkerSymbol();
    marker.width = 32;
    marker.height = 32;
    marker.offsetX = -16;
    marker.offsetY = -32;
    marker.url = "assets/img/marker.svg";
    const featureLayer = new FeatureLayer();
    featureLayer.featureClass = featureClass;
    const renderer = new SimpleRenderer();
    renderer.symbol = marker;
    featureLayer.renderer = renderer;
    map.addLayer(featureLayer);

}
